<template>
  <div class="p-[16px] bg-[var(--base-color)]">
    <div class="flex items-center justify-between text-[14px] leading-[20px] text-[#3a4259] pb-[16px]">
      <div>
        <span>发货仓库名称: {{ logistics.ship_warehouse_name || "--" }}</span>
        <el-divider direction="vertical" />
        <span>物流商单号：{{ logistics.logistics_bill_num || "--" }}</span>
        <el-divider direction="vertical" />
        <span class="text-[var(--base-text-color)]">追踪号：{{ logistics.tracking_number || "--" }}</span>
      </div>
      <span class="text-[#3487FF] cursor-pointer" @click="gotuPage"> 点击跳转【17track】</span>
    </div>
    <div class="border relative rounded-[8px] border-[#E6E7E9] p-[16px] pb-[0px]">
      <el-timeline>
        <el-timeline-item
          v-for="(activity, index) in activities"
          :key="index"
          :icon="activity.icon"
          :type="activity.type"
          :color="activity.color"
          :size="activity.size"
          :hollow="activity.hollow"
          :timestamp="activity.timestamp"
        >
          <span v-if="index === 0" class="text-[12px] scale-[0.8] leading-[14px] px-[5px] py-[2px] rounded-[5px] rounded-br-[0] text-center bg-[#FF609E] text-[#fff] mr-[4px]"> 最新 </span>
          {{ activity.content }}
        </el-timeline-item>
      </el-timeline>
      <div class="absolute bottom-[8px] right-[8px]">
        <span class="flex items-center">
          <svg-icon icon-class="fanyi" class="mr-[4px] text-[16px] text-[#3487FF]" />
          <span class="text-[14px] text-[var(--base-text-color)] leading-[20px]">中文简体</span>
        </span>
      </div>
    </div>
  </div>
</template>

<script setup lang="jsx">
import { getOrcdxq } from "@/api/public"
const gotuPage = () => {
  // console.log(props)
  // window.open('https://t.17track.net/zh-cn#nums='+props.logistics.tracking_number)
}
const props = defineProps({
  logistics: {
    type: Object,
    default: {},
  },
})

const activities = ref([
  // {
  //   content: "快件到达【龙岗杨美服务点】",
  //   timestamp: "2023/3/4 09:13:49",
  //   icon: (
  //     <el-icon size="16">
  //       <ArrowDown />
  //     </el-icon>
  //   ),
  //   color: "#E6E7E9",
  // },
  // {
  //   content: "快件已发车",
  //   timestamp: "2023/3/4 09:13:49",
  //   color: "#E6E7E9",
  // },
  // {
  //   content: "快件在【深圳龙岗分拣场】完成分拣，准备发往【龙岗杨美服务点】",
  //   timestamp: "2018-04-03 20:46",
  //   size: "large",
  // },
  // {
  //   content: "快件到达【深圳龙岗分拣场】",
  //   timestamp: "2023/3/4 09:13:49",
  //   type: "primary",
  //   hollow: true,
  // },
  // {
  //   content: "快件已发车",
  //   timestamp: "2023/3/4 09:13:49",
  // },
])

onMounted(() => {
  // const a = {
  //   tracking_number: props.logistics.tracking_number,
  //   api_number: props.logistics.api_number,
  //   customer_order_no: props.logistics.customer_order_no,
  // }
  // getOrcdxq(a).then((s) => {
  //   activities.value = s.data.map((v) => ({
  //     content: v.content,
  //     timestamp: v.create_time,
  //     hollow: v.status === 1,
  //   }))
  // })
})
</script>
